<template>
  <div>
    <el-carousel :interval="5000" arrow="always" width="1200px">
      <el-carousel-item v-for="(img,index) in image" :key="index">
        <img width="100%" height="100%" :src="img.src" :alt="img.title">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: [{title: 'img1', src: require('@/assets/image/img1.jpg')},
        {title: 'img2', src: require('@/assets/image/img2.jpg')},
        {title: 'img3', src: require('@/assets/image/img3.png')},
        {title: 'img4', src: require('@/assets/image/img4.jpg')},
        {title: 'img5', src: require('@/assets/image/img5.jpg')},
        {title: 'img6', src: require('@/assets/image/img6.jpg')}
      ]
    }
  }
}
</script>

<style>
.el-carousel {
  /*width: 1200px;*/
  height: 500px;
  margin: 0 auto;
}

.el-carousel__container {
  height: 500px !important;
}
</style>